<template>
    <div class="count-sales">
        <div class="card">
            <div class="card__header">
                <span class="label">昨日概况</span>
            </div>

            <div class="card__container">
                <ul class="count-sales__cop">
                    <li>
                        <span>活跃用户</span>
                        <span>{{ count.active_users }}</span>
                        <span style="margin-top:15px">
                            <span style="width:30px">日</span>
                            <span :class="
											count.active_users_yesterday == 0
												? 'zero'
												: count.active_users_yesterday > 0
													? 'add'
													: 'minus'
										">{{ count.active_users_yesterday > 0 ? '+' : ''
										}}{{ count.active_users_yesterday }}%</span></span>
                        <span style="margin-top:10px"><span>周</span>
                            <span :class="
											count.active_users_week == 0
												? 'zero'
												: count.active_users_week > 0
													? 'add'
													: 'minus'
										">{{ count.active_users_week > 0 ? '+' : ''
										}}{{ count.active_users_week}}%</span></span>
                    </li>

                    <li>
                        <span>注册用户</span>
                        <span>{{ count.registered_users }}</span>
                        <span style="margin-top:15px">
                            <span>日</span>
                            <span :class="
											count.registered_users_yesterday == 0
												? 'zero'
												: count.registered_users_yesterday > 0
													? 'add'
													: 'minus'
										">{{ count.registered_users_yesterday > 0 ? '+' : ''
										}}{{ count.registered_users_yesterday}}%</span></span>
                        <span style="margin-top:10px"><span>周</span>
                            <span :class="
											count.registered_users_week == 0
												? 'zero'
												: count.registered_users_week > 0
													? 'add'
													: 'minus'
										">{{ count.registered_users_week > 0 ? '+' : ''
										}}{{ count.registered_users_week }}%</span></span>
                    </li>

                    <li>
                        <span>人均访问次数</span>
                        <span>{{ count.visits }}</span>
                        <span style="margin-top:15px">
                            <span>日</span>
                            <span :class="
											count.visits_yesterday == 0
												? 'zero'
												: count.visits_yesterday > 0
													? 'add'
													: 'minus'
										">{{ count.visits_yesterday > 0 ? '+' : ''
										}}{{ count.visits_yesterday }}%</span></span>
                        <span style="margin-top:10px"><span>周</span>
                            <span :class="
											count.visits_week == 0
												? 'zero'
												: count.visits_week > 0
													? 'add'
													: 'minus'
										">{{ count.visits_week > 0 ? '+' : ''
										}}{{ count.visits_week }}%</span></span>
                    </li>

                    <li>
                        <span>人均停留时长</span>
                        <span>{{ count.remain }}</span>
                        <span style="margin-top:15px">
                            <span>日</span>
                            <span :class="
											count.remain_yesterday == 0
												? 'zero'
												: count.remain_yesterday > 0
													? 'add'
													: 'minus'
										">{{ count.remain_yesterday > 0 ? '+' : ''
										}}{{ count.remain_yesterday }}%</span>
                        </span>
                        <span style="margin-top:10px"><span>周</span>
                            <span :class="
											count.remain_week == 0
												? 'zero'
												: count.remain_week > 0
													? 'add'
													: 'minus'
										">{{ count.remain_week > 0 ? '+' : ''
										}}{{ count.remain_week }}%</span></span>
                    </li>
                </ul>
            </div>

            <!-- <div class="card__footer">
                <span class="label">日观看用户数</span>
                <span class="value">0</span>
            </div> -->
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useCool } from '/@/cool';

const { service, router } = useCool();

const count = ref({
	active_users: 0,
	active_users_yesterday: 0,
	active_users_week: 0,
	active_users_month: 0,
	registered_users: 0,
	registered_users_yesterday: 0,
	registered_users_week: 0,
	registered_users_month: 0,
	visits: 0,
	visits_yesterday: 0,
	visits_week: 0,
	visits_month: 0,
	remain: 0,
	remain_yesterday: 0,
	remain_week: 0,
	remain_month: 0
});

onMounted(() => {
	service.user.analysis.getYesterdayOverview({}).then(res => {
		console.log(res);
		count.value = res;
	});
	// service.user.analysis.getYesterdayOverview().then(res => {
	// 	console.log(res);
	// 	count.value = res;
	// });
});
</script>

<style lang="scss" scoped>
.count-sales {
	.card__container {
		height: 100px;
		padding-bottom: 10px;
	}
	&__cop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100px;
		margin-top: -10px;

		li {
			display: flex;
			align-items: center;
			flex-direction: column;
			list-style: none;
			flex: 1;

			span {
				&:first-child {
					color: #999;
					margin-bottom: 6px;
				}
				&:nth-child(2) {
					margin-top: 5px;
					color: #000;
				}
				margin-top: 4px;
				span {
					color: #999;
					&:first-child {
						color: #999;
						margin-right: 10px;
					}
					&.zero {
						color: #999 !important;
					}
					&.add {
						color: var(--color-primary) !important;
					}
					&.minus {
						color: var(--el-color-danger) !important;
					}
				}
			}
		}
	}
}
</style>
